<template>
  <div>
    <a-card title="考试安排查询" :bordered="false">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item label="查询类型">
          <a-select
            v-decorator="['queryType', { initialValue: 'time' }]"
            style="width: 180px"
          >
            <a-select-option value="time">按时间区段</a-select-option>
            <a-select-option value="unit">按承担单位</a-select-option>
            <a-select-option value="class">按行政班级</a-select-option>
            <a-select-option value="room">按教室</a-select-option>
            <a-select-option value="teacher">按教师</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="开始日期">
          <a-date-picker v-decorator="['startDate']" />
        </a-form-item>

        <a-form-item label="结束日期">
          <a-date-picker v-decorator="['endDate']" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
      </a-form>

      <a-divider />

      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handlePrint(record)">打印</a>
          <a-divider type="vertical" />
          <a @click="handleDetail(record)">详情</a>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '考试名称',
    dataIndex: 'examName',
    key: 'examName'
  },
  {
    title: '考试时间',
    dataIndex: 'examTime',
    key: 'examTime'
  },
  {
    title: '考场',
    dataIndex: 'room',
    key: 'room'
  },
  {
    title: '班级',
    dataIndex: 'class',
    key: 'class'
  },
  {
    title: '人数',
    dataIndex: 'studentCount',
    key: 'studentCount'
  },
  {
    title: '监考教师',
    dataIndex: 'teachers',
    key: 'teachers'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const data = [
  {
    key: '1',
    examName: '高等数学（上）	',
    examTime: '2023-06-10 09:00-11:00',
    room: '第一教学楼201',
    class: '计算机2101班',
    studentCount: 45,
    teachers: '王芳, 李廷'
  },
  {
    key: '2',
    examName: 'PLC与工业控制技术',
    examTime: '2023-06-12 14:00-16:00',
    room: '第二教学楼305',
    class: '计算机2101班',
    studentCount: 45,
    teachers: '王雪, 陈立伟'
  },
  {
    key: '3',
    examName: '数据结构',
    examTime: '2023-06-15 09:00-11:00',
    room: '信息楼101',
    class: '计算机2101班',
    studentCount: 45,
    teachers: '张明华, 孙老师'
  }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      data,
      columns,
      loading: false,
      pagination: {
        pageSize: 10
      }
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('查询条件:', values)
          this.loading = true
          // 模拟异步查询
          setTimeout(() => {
            this.loading = false
            this.$message.success('查询成功')
          }, 800)
        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter)
    },
    handlePrint(record) {
      this.$message.info(`打印 ${record.examName} 考试安排`)
    },
    handleDetail(record) {
      this.$message.info(`查看 ${record.examName} 考试详情`)
    }
  }
}
</script>